<template>
  <div class="h-full bg-gray-100 box-border overflow-y-auto" ref="messageListRef">
    <ChatMessageItem v-for="itemData in list" v-bind="{ ...itemData, ...attrs }" :side="side" />
  </div>
</template>

<script setup lang="ts">
import ChatMessageItem from '@/common/components/ChatMessageItem.vue'
import { UserTypeEnum } from '@/common/constants'
import { useAttrs, ref, watch, nextTick } from 'vue'
import type { IChatMessageItem } from '@/common/types'

interface Props {
  side: UserTypeEnum
  list: IChatMessageItem[]
}

const props = withDefaults(defineProps<Props>(), {
  side: UserTypeEnum.SERVICE,
  list: () => []
})

const attrs = useAttrs()

const messageListRef = ref()

watch(
  () => props.list.length,
  async () => {
    await nextTick()
    const scrollHeight = messageListRef.value.scrollHeight
    messageListRef.value.scrollTo(0, scrollHeight)
  }
)

console.debug(props, 'props')
</script>

<style scoped></style>
